<template>
	<view :class="{ 'bg-main': custom == 'white', 'bg-drak': custom == 'gray','border-bottom':border }">
		<!-- 列表标题 -->
		<view class="use-list-title  padding-lr w-full" :class="type == 'round' ? 'border-radius' : ''" @click="goto">
			<view class="dflex-b">
				<view class="dflex padding-tb-sm">
					<view v-if="iconfont && iconfont != ' '" class="iconfont __left margin-right-sm fs-40"
						:class="iconfont" :style="{ color: color }">
						<uni-icons type="color" :color="color" size="22" />
					</view>
					<view>
						<text :style="{fontSize: size + 'rpx', fontWeight: fwt }" class="label">{{ title }}</text>
					</view>
				</view>
				<view class="dflex">
					<text v-if="tip" class="tip margin-right-xs fs-25">{{tip}}</text>
					<slot name="right" />
					<uni-icons :size="16" v-if="showArrow" class="uni-icon-wrapper" color="#bbb" type="arrowright" />
				</view>
			</view>
			<template v-if="note">
				<view class="padding-bottom-sm">
					<text class="fs-23 ft-dark-3" style="line-height: 1.25;">{{ note }}</text>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			type: {
				type: String,
				default: 'square'
			},
			title: {
				type: String,
				default: '列表标题'
			},
			note: {
				type: String,
				default: ''
			},
			size: {
				type: String,
				default: '28'
			},
			fwt: {
				type: String,
				default: 'normal'
			},
			tip: {
				type: [String, Number],
				default: ''
			},
			iconfont: {
				type: String,
				default: 'icondaifahuo-'
			},
			showArrow: {
				type: [Boolean, String],
				default: true
			},
			color: {
				type: String,
				default: '#C0C4CC'
			},
			rightIcon: {
				type: String,
				default: 'iconjiantou-01'
			},
			rightColor: {
				type: String,
				default: '#626262'
			},
			custom: {
				type: String,
				default: 'white'
			},
			border: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {};
		},
		mounted() {
			console.log(this.custom, this.showArrow)
		},
		methods: {
			goto() {
				this.$emit('goto', {
					type: 'goto'
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.use-list-title {
		min-height:80rpx;
	}

	.use-list-title {
		.__left {
			// font-size: 28upx;
		}

		.iconfont {
			color: #3f3f3f;
		}

		.label {}

		.tip {
			color: #5d5d5d;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			display: block;
			max-width: 185px;
		}
	}

	.disabled {
		.label {
			color: #5a5a5a;
		}

		.tip {
			color: #adadad;
		}
	}

	.border-bottom {
		border-bottom: 1px solid #adadad;
	}

	.bg-main {
		.label {
			color: #3b3b3b;
		}
	}

	.bg-drak {
		.label {
			color: #fff;
		}
	}
</style>